import React from 'react';
import { Button, Descriptions, Alert } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonTable from '@/components/CommonTable';
import { formatAmount } from '@/utils/utils.jsx';

import '../index.less';

const ContractDetail = ({ detailVisible, handleCancel, detailData }) => {
  //取消
  const onCancel = () => {
    handleCancel();
  };

  const columns = [
    {
      title: '操作人',
      dataIndex: 'operationName',
      key: 'operationName',
      width: 80,
    },
    {
      title: '时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 100,
    },
    {
      title: '操作页面',
      dataIndex: 'operationPage',
      key: 'operationPage',
      width: 60,
    },
    {
      title: '操作功能',
      dataIndex: 'operationType',
      key: 'operationType',
      width: 60,
    },
    {
      title: '操作日志',
      dataIndex: 'eventContent',
      key: 'eventContent',
      width: 160,
      render: (text) => <div dangerouslySetInnerHTML={{ __html: text }}></div>,
    },
  ];

  // 详情table的数据
  const tableProps = {
    data: detailData.contractLogs,
    columns: columns,
    size: 'small',
    rowKey: 'operationName',
    scroll: { x: 340 },
  };
  return (
    <CommonModal
      title="账期详情"
      visible={detailVisible}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          关闭
        </Button>,
      ]}
      onCancel={onCancel}
      width={1000}
    >
      <div className="zjf-container">
        <Descriptions>
          <Descriptions.Item span={3} label="供应商名称">
            {detailData.contractVO?.storeName}
          </Descriptions.Item>
          <Descriptions.Item span={1} label="联系人">
            {detailData.contractVO?.realName}
          </Descriptions.Item>
          <Descriptions.Item span={2} label="联系方式">
            {detailData.contractVO?.userPhone}
          </Descriptions.Item>
          <Descriptions.Item span={1} label="授信金额（元）">
            {formatAmount(detailData.contractVO?.quota)}
          </Descriptions.Item>
          <Descriptions.Item span={2} label="授信时间（天）">
            {detailData.contractVO?.timePeriod}
          </Descriptions.Item>
        </Descriptions>
        <Alert
          style={{ marginBottom: '24px' }}
          message="注意：账期出账后5天内必需还清"
          type="warning"
          showIcon
        />
        <CommonTable {...tableProps} />
      </div>
    </CommonModal>
  );
};

export default React.memo(ContractDetail, (prev, next) => {
  if (
    prev.detailVisible !== next.detailVisible ||
    prev.detailData !== next.detailData
  ) {
    return false;
  }
  return true;
});
